import React ,{ useEffect, useState }from 'react';
import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Col, message, Row, Space, Modal, Button, Card, Tooltip } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './../../index.less'

const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

const waitTime = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default function EditForm(props) {
  const [form] = ProForm.useForm();
  const [formLayoutType, setFormLayoutType] = useState(
    LAYOUT_TYPE_HORIZONTAL,
  );

  const [grid, setGrid] = useState(true);
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue({
      key: '',
      roleId:'',
      roleName: '1222',
      nickname: '',
      deptCode: '',
      deptName: '',
      phone: '18297859347',
      email:'784940112@qq.com',
      status: true,
      createdAt: Date.now() - Math.floor(Math.random() * 2000),
      progress: Math.ceil(Math.random() * 100) + 1,
      memo:''
    });
  }, [form, props]);


  const handleOk = () => {
    form.submit();
  };

  const handleCancel = () => {
    props.onCancel();
    form.resetFields();
  };
  const handelFinish =async (values) => {
    await waitTime(2000);
    props.onSubmit(values)
    message.success('提交成功');
  }

  return (
    <Modal
      width={640}
      title='编辑用户信息'
      open={props.open}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        layout="horizontal"
        grid={grid}
        initialValues={props.values}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
        submitter={false}
        onFinish={handelFinish}
      >
        <ProFormText colProps={{ span: 12 }} name="roleName" label="roleName" tooltip="最长为 6 位" placeholder="请输入名称"/>
        <ProFormText colProps={{ span: 12 }} name="nickname" label="nickname" />
        <ProFormText colProps={{ span: 12 }} name="phone" label="电话" />
        <ProFormText colProps={{ span: 12 }} name="email" label="邮箱"
           rules={[
             () => ({
               validator(_, value) {
                 if (!value) {
                   return Promise.reject(new Error("邮箱不能为空"));
                 }
                 let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
                 if (!reg.test(value)) {
                   return Promise.reject(new Error("请输入正确数据格式"));
                 }
                 return Promise.resolve();
               },
               required: true,
             }),
           ]}
        />
        <ProFormDatePicker colProps={{ span: 12 }} className={styles.preTime} label="入职日期" name="date"/>
        <ProFormDateRangePicker colProps={{ span: 12 }} label="工作周期" name="dateRange"/>
        <ProFormSelect colProps={{ span: 12}} label="职位" name="level"
          valueEnum={{
            1: 'front end',
            2: 'back end',
            3: 'full stack',
          }}
        />
        <ProFormTextArea colProps={{ span: 12}} name="address" label="地址"/>

      </ProForm>
    </Modal>
  );
};



